<template>
  <div class="index">
    <div class="indexitem" style="margin: auto">
      <Slider :sliderArr="sliderArr" />
    </div>
    <div class="content">
      <el-row type="flex">
        <el-col style="line-height: 40px" :span="4">
          <div class="grid-content bg-purple">
            <div style="height: 40px">
              <i style="font-size: 20px" class="el-icon-s-comment"></i>
              <el-icon><ChatLineSquare /></el-icon
              ><strong style="font-size: 20px; color: #256aa5">
                最新消息</strong
              >
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="grid-content bg-purple-light">
            <ul>
              <li
                @click="tonews(index)"
                :key="index"
                v-for="(item, index) in information"
                :class="{ ulshow: index }"
              >
                <a style="cursor: pointer">{{ item.title }}</a>
                <span>{{ item.time }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <div class="information"></div>
    </div>
    <div style="font-size: 24px; font-weight: bold" class="project">
      <div class="projecttext">
        <el-row>
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <div class="projecttitle">
                项目案例
                <span style="color: #017cc2">PROJECT</span>
              </div>
              <engineering :en="true" :tocase="true" :images="images" />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light xioahang">
              <cooperation />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="About">
      <el-row type="flex" justify="center">
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <div class="Abouttitle">公司介绍</div>
            <div class="Abouttext">
              四川锦一建设工程有限公司于2017年4月17日成立，注册资金1000万元，法人：高屹夫，具有独立法人的经济实体。公司是按照《中华人民共和国公司法》，以市场经济为基础，以完善的公司法人制度为主体，以有限制度为核心，以公司为主要形式，以产权清晰、权责明确、政企分开、管理科学为基础组建而成。
            </div>
            <div class="more">
              <router-link to="/contact">查看更多</router-link>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
            <div class="Aboutimage">
              <img src="@/assets/images/log.png" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="qualification">
      <div>
        荣誉资质
        <span style="color: #017cc2">HONOR</span>
      </div>
      <div class="qualificationqualification">
        <engineering :en="false" :images="certificationimages" />
      </div>
    </div>
  </div>
</template>

<script>
import Slider from "@/components/Slider";
import cooperation from "@/components/cooperation";
import engineering from "@/components/engineering";
import { useRouter } from "vue-router";
import { defineComponent } from "vue";

export default defineComponent({
  name: "index",
  components: {
    Slider,
    cooperation,
    engineering,
  },
  setup() {
    const router = useRouter();
    const sliderArr = [
      require("@/assets/images/s1.jpg"),
      require("@/assets/images/s2.png"),
      require("@/assets/images/s3.jpg"),
    ];
    const information = [
      {
        title:
          "2021年四川锦一建设工程有限公司有限扬帆起航，再创辉煌！年会盛典 ",
        time: "2022:01:22",
      },
    ];
    const images = [
      {
        title: "拉萨河综合整治工程",
        url: require("@/assets/images/ls.png"),
      },
      {
        title: "岸堤水库除险加固工程",
        url: require("@/assets/images/ta.jpg"),
      },
      {
        title: "茨淮新河灌区凤台县大寨沟站拆除重建工程",
        url: require("@/assets/images/zw.jpg"),
      },
      {
        title: "罗山县白水冲等49座小型病险水库除险加固工程施工",
        url: require("@/assets/images/ls.jpg"),
      },
      {
        title: "湖北省汉江堤防加固重点工程",
        url: require("@/assets/images/hb.jpg"),
      },
      {
        title: "泸定县田坝乡磨河村、木角村农田灌溉工程项目 ",
        url: require("@/assets/images/xz.png"),
      },
      {
        title:
          "道孚县亚卓镇等十二个乡镇城乡建设用地增减挂钩试点项目拆旧区复垦工程 ",
        url: require("@/assets/images/xz1.png"),
      },
      {
        title:
          "南充市高坪区 2021 年第二批中央财政衔接推进乡村振兴补助资金以工代赈项目 ",
        url: require("@/assets/images/xz2.png"),
      },
      {
        title: "石渠县色须镇贫困村和平定居村饮水入户工程项目",
        url: require("@/assets/images/xz4.png"),
      },
    ];
    const certificationimages = [
      {
        title: "WSF水利水电工程环境管理体系认证",
        url: require("@/assets/images/hj.jpg"),
      },
      {
        title: "WSF水利水电工程职业健康安全管理体系认证",
        url: require("@/assets/images/aq.jpg"),
      },
      {
        title: "WSF水利水电工程施工质量管理体系认证",
        url: require("@/assets/images/dj.jpg"),
      },
      {
        title: "安全生产许可",
        url: require("@/assets/images/safety.jpg"),
      },
      {
        title: "建筑企业资质",
        url: require("@/assets/images/architecture.jpg"),
      },
      {
        title: "企业信用承诺书",
        url: require("@/assets/images/cl.png"),
      },
    ];
    const nextPage = () => {
      router.push("/contact");
    };
    const tonews = (e) => {
      router.push({
        path: `/news/newsparticulars/${e}`,
      });
    };
    return {
      sliderArr,
      tonews,
      nextPage,
      certificationimages,
      images,
      information,
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index {
  margin: 0 auto;
  margin-bottom: 10px;
  .indexitem {
    margin: auto;
  }
  .About {
    width: 1050px;
    margin: 0 auto;
    margin-top: 40px;
    .Abouttitle {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .Abouttext {
      text-indent: 2em;
      font-size: 14px;
      color: #0a0a0a;
      line-height: 28px;
    }
    .more {
      width: 104px;
      height: 41px;
      line-height: 41px;
      text-align: center;
      margin-top: 10px;
      background-color: #017cc2;
      > a {
        text-decoration: none;
        color: #fff;
      }
    }
    .Aboutimage {
      margin-left: 145px;
    }
  }
  .qualification {
    width: 1100px;
    margin: 0 auto;
    margin-top: 25px;
    > div {
      font-size: 24px;
      font-weight: bold;
    }
  }
}
.content {
  width: 1050px;
  margin: 0 auto;
}
.information {
  margin-right: 10px;
}
.bg-purple-light > ul {
  font-size: 14px;
  list-style: none;
}
.ulshow {
  display: none;
}
ul > li {
  width: 650px;
  margin-left: 50px;
}
.project {
  margin: auto;
  height: auto;
  margin-top: 20px;
  background: url("../assets/images/con1_t.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-position: top;
  .projecttext {
    width: 1200px;
    margin: 0px auto;
    padding-left: 100px;

    .grid-content {
      margin-left: 40px;
      margin-top: 5px;
      .cooperation {
        margin-top: 100px;
      }
    }
    .projecttitle {
      width: 100%;
      padding-top: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>
